<script setup lang="ts">
import LOGO from './logo/index.vue'
import MenuList from './menu/index.vue'
import HeaderSearch from './search/index.vue'
import Operation from './operation/index.vue'
import VIP from './vip/index.vue'
import UserNotice from './user/userNotice.vue'
import UserAvatar from './avatar/index.vue'
import {AppstoreOutlined} from "@ant-design/icons-vue";
</script>

<template>
  <header class="header-area fixed flex items-center justify-between z-30">
    <div class="header-area-left flex h-full items-center">
      <LOGO/>
      <MenuList/>
    </div>
    <div class="header-area-right site-icon flex gap-3.5">
      <label for="menu-open"
             class="dialog-btn has-tip iconfont menu-open hidden cursor-pointer relative justify-center items-center text-center"
             title="查看菜单"
             role="button">
        <AppstoreOutlined/>
      </label>
      <HeaderSearch/>
      <Operation/>
      <VIP/>
      <UserNotice/>
      <UserAvatar/>
    </div>
  </header>
</template>

<style lang="less" scoped>
.header-area {
  padding-inline: var(--edge-lr);
  margin-inline: auto;
  inset: 0 0 auto;
  height: var(--nav-height);
  border-radius: 0 0 var(--radius) var(--radius);
  transition: .5s;

  &:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 1;
    z-index: 0;
    outline: var(--border);
    border-radius: inherit;
    background: var(--s-bg, hsl(0 0% 100% / .9));
    box-shadow: var(--box-shadow-white);
    backdrop-filter: saturate(1.8) blur(20px);
    transition: inherit;
  }
}

.dialog-btn {
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
  color: #999;
  border: var(--border);
}

@media (width <= 641px) {
  .header-area .site-icon .menu-open {
    display: flex;
  }
  #menu-open:checked ~ .menu-out {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
  }
}
</style>
